const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/js/index',
    output: {
        filename: 'js/[name].js',
        path: resolve(__dirname, 'build'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    plugins: [new HtmlWebpackPlugin()],
    mode: 'development',
    devServer: {
        //项目构建后路径
        contentBase: resolve(__dirname, 'bulid'),
        //启动gzip压缩
        compress: true,
        //端口号
        port: 3000,
        //自动打开浏览器
        open: true,
    },
    resolve: {
        //配置解析模块路径别名：优点，简写路径。缺点：路径没有提示
        alias: {
            $CSSPath: resolve(__dirname, 'src/css'),
        },
        //配置省略文件路径的后缀名。如果目录下同时存在index.js,index.css会出问题
        extensions: ['js', 'json', '.css'],
        //告诉webpack node_modules的目录，如果没配置会从当前目录一级一级向上找
        modules: [resolve(__dirname, '../../node_modules', 'node_modules')],
    },
};
